<template>
  <div class="career-card">
    <div class="card-header">
      <h3>职业发展预测</h3>
      <el-tag size="small" type="success">AI分析</el-tag>
    </div>
    <div class="card-content">
      <div class="radar-chart" ref="radarChart"></div>
      <div class="career-list">
        <h4>推荐职业方向</h4>
        <ul>
          <li>
            <div class="rank-badge">1</div>
            <div class="career-info">
              <span class="career">算法工程师</span>
              <div class="match-rate">
                <div class="progress" :style="{ width: '95%' }"></div>
                <span>95% 匹配度</span>
              </div>
            </div>
          </li>
          <li>
            <div class="rank-badge">2</div>
            <div class="career-info">
              <span class="career">数据分析师</span>
              <div class="match-rate">
                <div class="progress" :style="{ width: '88%' }"></div>
                <span>88% 匹配度</span>
              </div>
            </div>
          </li>
          <li>
            <div class="rank-badge">3</div>
            <div class="career-info">
              <span class="career">研究员</span>
              <div class="match-rate">
                <div class="progress" :style="{ width: '82%' }"></div>
                <span>82% 匹配度</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="analysis-factors">
        <h4>分析依据</h4>
        <div class="factors-grid">
          <div class="factor">
            <el-icon><Monitor /></el-icon>
            <span>专业技能</span>
          </div>
          <div class="factor">
            <el-icon><Reading /></el-icon>
            <span>学习能力</span>
          </div>
          <div class="factor">
            <el-icon><Operation /></el-icon>
            <span>创新思维</span>
          </div>
          <div class="factor">
            <el-icon><User /></el-icon>
            <span>性格特征</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { Monitor, Reading, Operation, User } from '@element-plus/icons-vue'

const radarChart = ref(null)

onMounted(() => {
  const chart = echarts.init(radarChart.value)
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        const descriptions = {
          '专业能力': '包括专业知识掌握程度、实践能力和技术应用水平',
          '学习能力': '知识获取能力、自主学习能力和终身学习意识',
          '创新思维': '问题解决能力、创新思维和跨界整合能力',
          '沟通能力': '表达能力、团队协作和人际交往能力',
          '团队协作': '团队意识、领导力和项目管理能力'
        };
        return `${params.name}: ${params.value}<br/>${descriptions[params.name]}`;
      }
    },
    radar: {
      indicator: [
        { name: '专业能力', max: 100 },
        { name: '学习能力', max: 100 },
        { name: '创新思维', max: 100 },
        { name: '沟通能力', max: 100 },
        { name: '团队协作', max: 100 }
      ],
      splitArea: {
        areaStyle: {
          color: ['rgba(255,255,255,0.05)', 'rgba(255,255,255,0.02)']
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.2)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.1)'
        }
      },
      name: {
        textStyle: {
          color: '#fff',
          fontSize: 12,
          backgroundColor: 'rgba(64,158,255,0.1)',
          padding: [5, 7],
          borderRadius: 3
        }
      }
    },
    series: [{
      type: 'radar',
      data: [{
        value: [90, 85, 88, 82, 85],
        name: '能力分布',
        areaStyle: {
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [{
              offset: 0,
              color: 'rgba(64,158,255,0.3)'
            }, {
              offset: 1,
              color: 'rgba(64,158,255,0.1)'
            }]
          }
        },
        lineStyle: {
          color: '#409EFF',
          width: 2,
          shadowColor: 'rgba(64,158,255,0.5)',
          shadowBlur: 10
        },
        symbol: 'circle',
        symbolSize: 8,
        emphasis: {
          lineStyle: {
            width: 4
          },
          areaStyle: {
            color: 'rgba(64,158,255,0.4)'
          }
        }
      }]
    }]
  }
  chart.setOption(option)

  // 添加动态效果
  chart.on('mouseover', { seriesIndex: 0 }, function(params) {
    const emphasisStyle = {
      areaStyle: {
        color: 'rgba(64,158,255,0.4)'
      },
      lineStyle: {
        width: 4
      }
    };
    chart.setOption({
      series: [{
        emphasis: emphasisStyle
      }]
    });
  });

  chart.on('mouseout', { seriesIndex: 0 }, function(params) {
    const normalStyle = {
      areaStyle: {
        color: 'rgba(64,158,255,0.2)'
      },
      lineStyle: {
        width: 2
      }
    };
    chart.setOption({
      series: [{
        emphasis: normalStyle
      }]
    });
  });
})
</script>

<style lang="less" scoped>
.career-card {
  padding: 20px;
  height: 100%;
  min-height: 500px;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h3 {
      color: #fff;
      margin: 0;
      font-size: 18px;
      font-weight: 500;
    }
  }

  .card-content {
    .radar-chart {
      height: 240px;
      margin-bottom: 20px;
    }

    .career-list {
      margin-bottom: 20px;

      h4 {
        color: #fff;
        font-size: 16px;
        margin: 0 0 15px 0;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
          display: flex;
          align-items: center;
          padding: 12px 0;
          border-bottom: 1px solid rgba(255,255,255,0.1);

          &:last-child {
            border-bottom: none;
          }

          .rank-badge {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: linear-gradient(135deg, #409EFF, #67C23A);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 12px;
          }

          .career-info {
            flex: 1;

            .career {
              color: #fff;
              font-size: 14px;
              display: block;
              margin-bottom: 6px;
            }

            .match-rate {
              position: relative;
              height: 4px;
              background: rgba(255,255,255,0.1);
              border-radius: 2px;
              margin-top: 8px;

              .progress {
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                background: linear-gradient(90deg, #409EFF, #67C23A);
                border-radius: 2px;
              }

              span {
                position: absolute;
                right: 0;
                top: -20px;
                font-size: 12px;
                color: rgba(255,255,255,0.7);
              }
            }
          }
        }
      }
    }

    .analysis-factors {
      h4 {
        color: #fff;
        font-size: 16px;
        margin: 0 0 15px 0;
      }

      .factors-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;

        .factor {
          background: rgba(255,255,255,0.05);
          padding: 12px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          gap: 8px;

          .el-icon {
            font-size: 20px;
            color: #409EFF;
          }

          span {
            color: #fff;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style> 